<!-- 无限滚动 
    eg:
        <div style="width: 800px;height:500px;">
            <InfiniteScroll :getData="getList" :pageSize="pageSize" itemHeight="104px" fileType="1" typeId="1055"/>
        </div>
        
        async getList(params){
            try {
                const {data} = await getFileType(params)
                return data
            } catch (error) {
                this.$message.error(error)
            }
        }
    //getList:接口获取数据
    //pageSize:每次请求条数
    //itemHeight: 每一行高度
    //tyoeId：文件id
    //fileType:请求文件类型（比如预案管理 0，流程管理 1）
-->
<template>
    <div
        class="infinite_scroll"
        v-infinite-scroll="loadDatas"
        infinite-scroll-throttle-delay="200"
        infinite-scroll-disabled="busy"
        infinite-scroll-distance="10"
    >
        <div class="infile" v-for="(item,index) in list" :key="index" :style="{height:itemHeight,lineHeight:itemHeight}">
            <div class="file_left">
                <el-image 
                    class="icon"
                    :src="item.icon"
                ></el-image>
                <div class="file">
                    <el-tooltip
                        popper-class="testtooltip"
                        class="item" 
                        effect="light" 
                        :content="item.name" 
                        placement="top"
                        :open-delay="delay"
                    >
                        <span style="font-size: 16px;">{{ item.name }}</span>
                    </el-tooltip>
                    <!-- <span>{{item.name}}</span> -->
                    <span style="font-size: 16px;">{{item.size || '5.0M'}}</span>
                </div>
            </div>
            <div class="btn">
                <el-button style="font-size: 14px;" @click="previewFile(item)">预览</el-button>
                <el-button style="font-size: 14px;" @click="downloadFile(item.address,item.name)">下载</el-button>
            </div>
        </div>
        <!-- <div class="loading" v-if="!busy && loading" :style="{height:itemHeight,lineHeight:itemHeight}">正在加载中...</div> -->
        <div class="loading" v-if="list.length == 0 && !loading" :style="{height:itemHeight,lineHeight:itemHeight}">
            <el-empty class="empty" :image="emptys" :image-size="imageSize"></el-empty>
        </div>
        <div class="load" v-if="loading" v-loading="loading"></div>
        <viewFile ref="viewFileShow"></viewFile>
    </div>
</template>

<script>
import { fileIcon,downloadFile } from '@/utils/fileIcon'
import infiniteScroll from 'vue-infinite-scroll'
import emptyImage from '@/assets/empty/empty.png'
export default {
    name:"InfiniteScroll",
    directives: { infiniteScroll },
    props:{
        getData:{
            type:Function,
            default:null
        },
        pageSize:{
            type:Number,
            default:10
        },
        fileType:{
            type:String | Number,
            default:'0'
        },
        typeId:{
            type:String | Number,
            default:null
        },
        itemHeight:{
            type:String,
            default:'100px'
        }
    },
    watch:{
        typeId(cur,pre){
            this.indexPage = 1
            this.list = []
            this.$nextTick(()=>{
                this.loadDatas()
            })
        },
        loading(cur){
            this.$emit('load',this.loading)
        }
    },
    data() {
        return {
            emptys:emptyImage,
            imageSize:80,
            delay:800,
            indexPage:1,
            busy:true,
            list:[],
            loading:false,
            clear:false
        }
    },
    mounted(){
        this.$emit('load',this.loading)
    },
    methods: {
        loadDatas(){
            this.busy = true
            this.loading = true
            setTimeout(()=>{
                this.getList()
            },500)
        },
        async getList(){
            try {
                let params = {
                    current:this.indexPage,
                    size:this.pageSize,
                    type:this.fileType,
                    typeId:this.typeId
                }
                const data = await this.getData(params)
                this.loading = false
                fileIcon(data.records).map(item=>{
                    this.list.push(item)
                })
                if(this.indexPage < data.total / this.pageSize){
                    this.indexPage++
                    this.busy = false
                }
            } catch (error) {
                this.loading = false
            }
        },
        previewFile(item){
            this.$refs.viewFileShow.openDialog(item);
        },
        downloadFile(url,name){
            downloadFile(url,name)
        },
    },
}
</script>
<style lang="scss" scoped>
.load{
    height: 100%;
}
::v-deep .el-button{
    display: flex;
    justify-content: center;
    align-items: center;
}
.empty{
    ::v-deep .el-empty__image{
        margin-bottom: -35px;
    }
  ::v-deep .el-empty__description{
    display: block;
    padding-right: 10px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #A1A1A1;
  }
}
.infinite_scroll {
    overflow: auto;
    width: 100%;
    height: 100%;
    .infile {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #dcdfe6;
      padding-left: 40px;
      .file_left{
        display: flex;
        align-items: center;
        .icon{
            width: 50px;
            height: 50px;
            margin-right: 15px;
        }
        .file{
            line-height: 25px;
            span{
                display: block;
            }
            >span:first-child{
                height: 25px;
                max-width: 500px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            >span:last-child{
                color: #38c6da;
            }
        }
      }
    .btn{
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-right: 10px;
        .el-button{
            height: 30px;
            border-radius: 30px;
            border-color: #38C6DA;
            color: #38C6DA;
        }
    }
    }
  }
  .loading{
    text-align: center;
    font-size: 14px;
    font-weight: lighter;
    color: #38C6DA;
  }
//   ::-webkit-scrollbar {display:none}
</style>